<template>
  <div class="builds-hall" :class="selectedClass">
    <el-card class="filter-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-select v-model="selectedClass" placeholder="选择职业" clearable @change="handleClassChange">
            <el-option v-for="item in classList" :key="item.value" :label="item.value" :value="item.value"/>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="selectedSchool" placeholder="选择专精" clearable @change="handleSchoolChange">
            <el-option v-for="item in schoolList" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-col>
      </el-row>
    </el-card>

    <div class="builds-list" >
      <el-empty v-if="!loading && paginatedBuilds.length === 0" description="暂无数据"/>
      <el-skeleton v-else-if="loading" :rows="3" animated/>
      <el-card v-else v-for="build in paginatedBuilds" :key="build.id" class="build-item">
        <div class="build-content">
          <div class="build-left">
            <div class="build-icon" :class="build.buildClass.toLowerCase()"></div>
          </div>
          <div class="build-info">
            <div class="build-details">
              <el-tag :type="getClassTagType(build.buildClass)">{{ build.buildClass }}</el-tag>
              <el-tag type="info" class="school-tag">{{ build.buildSchool }}</el-tag>
            </div>
            <h3 class="build-name">{{ build.buildName }}</h3>
          </div>
          <div class="build-actions">
            <div class="like-section">
              <el-button type="primary" text class="like-button" @click="handleLike(build)">
                <el-icon>
                  <Pointer/>
                </el-icon>
                <span class="like-count">{{ build.likeCountStatistics }}</span>
              </el-button>
            </div>
            <h3 class="build-name">作者：{{ build.buildAuthor }}</h3>
            <el-button type="primary" @click="handleViewDetail(build)">查看详情</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <el-row justify="center" class="pagination-row">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30]"
          :total="filteredBuilds.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-row>
  </div>

</template>

<script>
import {useEquipmentBuildsHall} from '@/assets/js/equipment-builds-hall'
import {Pointer} from '@element-plus/icons-vue'

export default {
  components: {
    Pointer
  },
  setup() {
    return {
      ...useEquipmentBuildsHall()
    }
  }
}

</script>

<style src="@/assets/css/equipment-builds-hall.css" scoped></style>